<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<style>

    .quantity input {
        width: 25%;
        padding: 5px 10px;
        text-align: center;
    }
</style>

<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12">
                    <div class="layui-col-md12">

                        <div class="layui-inline">
                            <form action="" class="layui-form">
                                <div class="layui-form-item" style="margin-bottom: 0px;">
                                    <div class="layui-inline" style="margin-right: 0px;">
                                        <div class="layui-input-inline" style="width: 200px;">
                                            <input type="text" name="goods_name" autocomplete="off" placeholder="商品名称"
                                                   class="layui-input">
                                        </div>
                                        <!--暂时关闭-->
                                        <div class="layui-input-inline" style="width: 200px;display: none">
                                            <input type="text" name="shanghu" autocomplete="off" placeholder="商户"
                                               value="1"    class="layui-input">
                                        </div>

                                        <div class="layui-input-inline" style="width: 200px;">
                                            <select name="fenlei">
                                                <option value="">选择分类</option>
                                                <option value="开关">开关</option>
                                                <option value="门">门</option>
                                                <option value="地板">地板</option>
                                                <option value="窗帘">窗帘</option>
                                                <option value="油漆">油漆</option>
                                                <option value="其它">其它</option>
                                            </select>
                                        </div>

                                    </div>
                                    <div class="layui-inline" style="margin-right: 0px;">
                                        <div class="layui-btn-group layui-inline" style="margin: 0px;">
                                            <button onclick="location.reload()" class="layui-btn layui-btn-primary">重置
                                            </button>
                                            <button lay-submit="" lay-filter="select"
                                                    class="layui-btn layui-btn-normal"><i class="layui-icon"></i>查找
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>


                    </div>
                    <div class="layui-col-md12" >


                        <table class="layui-table" lay-skin="line">
                            <thead>
                            <tr>
                                <th>商品名</th>
                                <th>商家</th>
                                <th>型号</th>
                                <th>材质</th>

                                <th>品牌</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in items" :data_id="item.id">
                                <td><b>{{item.name}}</b></td>
                                <td>{{item.shop_name}}</td>
                                <td>{{item.xinghao}}</td>
                                <td>{{item.caizhi}}</td>
                                <td>{{item.pinpai}}</td>
                                <td>
                                    <button class="layui-btn layui-btn-sm "
                                            @click="selectedGood(item)">
                                        选择
                                    </button>

                                </td>
                            </tr>

                            </tbody>
                        </table>

                    </div>
                    <div id="demo7"></div>
                </div>
                <!--<div class="layui-col-sm4">-->
                <!--&lt;!&ndash;<div class="layui-col-md12" style="height: 38px;margin-bottom:15px;line-height: 38px;padding-left: 15px;font-size: 20px">&ndash;&gt;-->
                <!--&lt;!&ndash;材料清单&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--<h3>材料清单</h3>-->
                <!--<hr>-->
                <!--<div class="layui-col-md12" style="height: 350px;overflow:auto">-->

                <!--<table class="layui-table" lay-skin="line">-->
                <!--<thead>-->
                <!--<tr>-->
                <!--<th>商品名</th>-->
                <!--<th>数量</th>-->
                <!--<th></th>-->
                <!--</tr>-->
                <!--</thead>-->
                <!--<tbody>-->
                <!--<tr v-for="(item,index) in list" :data_id="item.id">-->
                <!--<td><b>{{item.name}}</b></td>-->
                <!--<td>-->
                <!--<div class="quantity">-->
                <!--<a href="javascript:void 0" @click="change(item,-1)"style="margin-right:5%">-</a>-->
                <!--<input type="text" value=""  v-model="item.num">-->
                <!--<a href="javascript:void 0" @click="change(item,1)" style="margin-left: 5%">+</a>-->
                <!--</div>-->
                <!--</td>-->
                <!--<td>-->
                <!--<button class="layui-btn layui-btn-sm layui-btn-primary"-->
                <!--@click="delGood(index)">-->
                <!--删除-->
                <!--</button>-->
                <!--</td>-->
                <!--</tr>-->

                <!--</tbody>-->
                <!--</table>-->

                <!--</div>-->
                <!--</form>-->
                <!--</div>-->

                <!--<div class="layui-col-md12" style="text-align: center;position: fixed;-->
                <!--left: 0;-->
                <!--bottom: 0px;background-color: #f4f4f4;width: 100%">-->
                    <!--<button class="layui-btn " onclick="sure()" style="width: 10%;margin: 10px">-->
                        <!--确认-->
                    <!--</button>-->
                    <!--<button class="layui-btn layui-bg-gray" onclick="cancel()" style="width: 10%;margin: 10px">-->
                        <!--取消-->
                    <!--</button>-->
                <!--</div>-->

            </div>
        </div>

    </div>


</div>
</div>

<script>

    var app = new Vue({
        el: '#app',
        data: {
            items: [],
            list: [],
            curr: 1,//当前页
            limit: 10,//当前页数据个数

        },
        methods: {
            //获取所有数据
            selectedGood: function (n) {

                parent.add_goods(n);
                layer.msg('选择成功！');
//                var i = 0;
//                this.list.forEach(function (item, index) {
//                    if (item.id == n.id) {
//                        i = 1;
//                    }
//                });
//                if (i == 0) {
//                    layer.msg('选择成功！');
//                    Vue.set(n, 'num', '1');
//                    this.list.push(n);
//                }
//                else {
//                    layer.msg('请不要重复选择哟！');
//                }
            },
            delGood: function (index) {
                this.list.splice(index, 1);
            },
            change: function (item, way) {
                if (way > 0) {
                    item.num++;
                }
                else {
                    item.num--;
                    if (item.num < 1) {
                        item.num = 1;
                    }
                }
            },
        },
    });

    function init() {
        layer.load(2);
        $.get("{:url('select_material')}", {page: app.curr, limit: app.limit},
            function (res) {
                layer.closeAll();
                app.items = res.data;
            }
        );
    }

    $(function () {
        if (parent.app.cailiao == "已选择") {
            var localGood = layui.data('good');
            var list = localGood.goodList;
            if (list) {
                app.list = list;
            }
        }

    });

    layui.use(['table', 'laypage', 'form'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form;
        var laypage = layui.laypage
        var table = layui.table;
//        laypage.render({
//            elem: 'demo7'
//            , count: "{$count}" //数据总数
//            , curr: 1
//            , limit: 6
//            , limits: [6, 12]
//            , layout: ['count', 'prev', 'page', 'next']
//            , jump: function (obj) {
//                console.log(obj)
//                app.curr = obj.curr;
//                app.limit = obj.limit;
//                init();
//            }
//        });

        form.on('submit(select)', function (data) {

            console.log(data.field);

            layer.load(2);
            $.get("{:url('select_good')}", data.field,
                function (res) {
                    layui.use(['laypage'], function () {
                        var laypage = layui.laypage;
                        //完整功能
                        laypage.render({
                            elem: 'demo7'
                            , curr: 1
                            , limit: 8
                            , count: res.total
                            , layout: ['count', 'prev', 'page', 'next']
                            , jump: function (obj) {
                                console.log(obj)
                                app.curr = obj.curr;
                                app.limit = obj.limit;
                                layer.load(2);

                                $.get("{:url('select_good')}", {
                                        page: app.curr,
                                        limit: app.limit,
                                        goods_name: data.field.goods_name,
                                        shanghu: data.field.shanghu,
                                        fenlei: data.field.fenlei,
                                    },
                                    function (res) {
                                        layer.closeAll();
                                        app.items = res.data;
                                    }
                                );
                            }
                        });

                    });
                }
            );

            return false;
        });

    });
    function sure() {
        layui.data('good', {
            key: 'goodList',
            value: app.list
        });
        var localGood = layui.data('good');
        if (localGood.goodList.length != 0) {
            console.log("fddwqdq");
            parent.app.cailiao = "已选择";
            parent.layer.closeAll();

        }
        else {
            parent.app.cailiao = "选择";
            parent.layer.closeAll();
        }
    }
    function name(that) {
        var data = $(that).text();
        layer.tips(data, $(that), {
            tips: [1, '#009688'],
            time: 4000
        });
    }
    function cancel() {
        parent.layer.closeAll();
    }

</script>
</body>
</html>